<style>
.image {
  width: 100%;
  display: block;
}
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 260px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding: 0 35px;
}
.pull-right {
  padding: 5px 5px;
  float: right;
  font-size: 16px;
}
</style>

<template>
  <basic-container>
    <el-container>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow"
             style="padding:10px 5px;">
          <h4 class="dd-dataCenter-heading ng-binding"
              data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">信息预警
            <span class="text-muted ng-binding"
                  data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb"></span>
          </h4>
          <div class="col-sm-12">
            <div class="col-sm-12 member-chart ng-scope el-card box-card"
                 style="padding:10px 15px 0 15px">
              <el-form :inline="true"
                       :model="filters"
                       size="small"
                       ref="filters"
                       class="searchForm">
                <el-form-item label="所属小区"
                              prop="dept">
                  <el-input v-model="filters.dept"
                            size="medium"
                            disabled
                            class="input-with-select">
                    <el-button slot="append"
                               icon="el-icon-search"
                               @click.native="handleDept"></el-button>
                  </el-input>
                </el-form-item>
                <span class="bth_search">
                  <el-form-item>
                    <el-button type="success"
                               icon="el-icon-search"
                               v-on:click="getDataGrid(true)">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-refresh"
                               @click="resetSearchForm('filters')">重置</el-button>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <el-row id="toolbar_unit">
              <el-col :span="24">
                <div class="grid-content bg-purple-light">
                  <el-button type="success"
                             size="mini"
                             @click="handleFanancing"
                             icon="el-icon-upload">新增预警</el-button>
                </div>
              </el-col>
            </el-row>

            <el-table :data="gridDatas"
                      id="dataGrid"
                      empty-text="当前小区没有预警业主信息"
                      :row-class-name="tableRowClassName"
                      border
                      size="mini"
                      style="width: 100%;"
                      height="280px">
              <el-table-column header-align="center"
                               align="center"
                               prop="index"
                               :formatter="index_formatter"
                               label="序号"
                               width="60px"></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="username"
                               label="业主姓名"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="idCard"
                               label="身份证号"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="area"
                               label="房屋面积"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="houseType"
                               label="房屋类型"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="familyCount"
                               label="家庭成员数"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="marriage"
                               label="婚姻状况"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="residence"
                               label="是否常住"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="property"
                               label="物业缴费是否正常"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="description"
                               label="异常信息"
                               show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
      <!--新增界面-->
      <el-dialog :title="title"
                 :visible.sync="addFormVisible"
                 :close-on-click-modal="false">
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow"
             style="padding:10px 5px;">
          <h4 class="dd-dataCenter-heading ng-binding"
              data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">业主查詢
            <span class="text-muted ng-binding"
                  data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb"></span>
          </h4>
          <div class="col-sm-12">
            <div class="col-sm-12 member-chart ng-scope el-card box-card"
                 style="padding:10px 15px 0 15px">
              <el-form :inline="true"
                       :model="filters"
                       size="small"
                       ref="filters"
                       class="searchForm">
                <el-form-item class="el-form-item"
                              label="业主姓名"
                              prop="name">
                  <el-input class="filter-item"
                            placeholder="业主姓名"
                            v-model="filters.name"
                            style="width:150px"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item"
                              label="身份证号"
                              prop="idCard">
                  <el-input class="filter-item"
                            placeholder="身份证号"
                            v-model="filters.idCard"></el-input>
                </el-form-item>
                <span class="bth_search">
                  <el-form-item>
                    <el-button type="success"
                               icon="el-icon-search"
                               v-on:click="getList(true)">查询</el-button>
                    <el-button icon="el-icon-refresh"
                               @click="resetSearchForm('filters')">重置</el-button>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <el-row id="toolbar_unit">
              <el-col :span="24">
                <div class="grid-content bg-purple-light">
                  <el-button type="success"
                             size="mini"
                             @click="handleWorning"
                             icon="el-icon-upload"
                             :disabled="this.sels.length===0">新增预警</el-button>
                </div>
              </el-col>
            </el-row>
            <el-table :data="list"
                      id="dataGrid"
                      empty-text="当前小区没有该业主房产信息"
                      @selection-change="selsChange"
                      border
                      stripe
                      size="mini"
                      style="width: 100%;"
                      height="230px">
              <el-table-column type="selection"
                               width="45"></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="index"
                               :formatter="index_formatter"
                               label="序号"
                               width="60px"></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="communityName"
                               label="所属小区"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="username"
                               label="业主姓名"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="area"
                               label="房屋面积"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="familyCount"
                               label="家庭成员数"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="marriage"
                               label="婚姻状况"
                               show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center"
                               align="center"
                               prop="residence"
                               label="是否常住"
                               show-overflow-tooltip></el-table-column>

            </el-table>
          </div>
        </div>
        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click.native="addFormVisible = false">关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog title="选择小区"
                 :visible.sync="dialogDeptVisible"
                 :close-on-click-modal="false">
        <el-tree class="filter-tree"
                 :data="treeDeptData"
                 check-strictly
                 node-key="id"
                 highlight-current
                 ref="deptTree"
                 @node-click="getNodeData"
                 :props="defaultProps"
                 default-expand-all>
        </el-tree>
      </el-dialog>

    </el-container>
  </basic-container>
</template>
<style>
.el-table .warning-row {
  background: Salmon;
}
</style>
<script>
import { getToken, setToken, removeToken, getFileIp } from "@/util/auth";
import request from "@/router/axios";
import deptTree from "../report/deptTree.vue";
export default {
  name: "repairRegister",
  components: {
    deptTree
  },
  data() {
    return {
      title: "",
      statusOptions: [],
      treeDeptData: [],
      treeData: [
        {
          id: "1",
          leaf: false,
          name: "潍坊总部基地",
          children: [
            {
              id: 4,
              leaf: true,
              name: "北京云集汇通科技有限公司",
              children: []
            }
          ]
        },
        {
          id: "2",
          leaf: false,
          name: "北斗信息产业基地",
          children: [
            {
              id: 3,
              leaf: true,
              name: "蜂鸟智能科技有限公司"
            }
          ]
        }
      ],
      zhangsan: [
        {
          index: 1,
          communityName: "北京云集汇通科技有限公司",
          username: "赵湖",
          idCard: "370481199306031534",
          area: "约130平",
          houseType: "三室两厅",
          familyCount: "5",
          marriage: "已婚",
          residence: "否",
          property: "正常"
        }
      ],
      liuyu: [
        {
          index: 1,
          communityName: "蜂鸟智能科技有限公司",
          username: "刘宇",
          idCard: "370481199306031533",
          area: "约90平",
          houseType: "两室一厅",
          familyCount: "3",
          marriage: "已婚",
          residence: "否",
          property: "偶尔欠费"
        }
      ],
      list: [],
      communityOptions: [],
      buildingOptions: [],
      unitOptions: [],
      sels: [], // 列表选中列
      houseOptions: [],
      addForm: [],
      addFormVisible: false,
      dialogDeptVisible: false,
      //单元过滤条件
      filters: {
        area: "",
        status: "",
        insurrance: "",
        dept: ""
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      gridDatas: [],
      worningData1: [
        {
          index: 1,
          username: "赵湖",
          idCard: "370481199306031534",
          area: "约130平",
          houseType: "三室两厅",
          familyCount: "5",
          marriage: "已婚",
          residence: "否",
          property: "偶尔欠费",
          type: 1,
          description: "物业费欠费"
        },
        {
          index: 1,
          username: "刘宇",
          idCard: "370481199306031534",
          area: "约150平",
          houseType: "四室两厅",
          familyCount: "8",
          marriage: "已婚",
          residence: "是",
          property: "偶尔欠费",
          type: 1,
          description: "30日内没有回小区"
        },
        {
          index: 1,
          username: "刘思思",
          idCard: "370481199306031533",
          area: "约120平",
          houseType: "三室一厅",
          familyCount: "5",
          marriage: "已婚",
          residence: "否",
          property: "正常",
          type: 0,
          description: "无"
        },
        {
          index: 1,
          username: "张日忠",
          idCard: "370481196506031533",
          area: "约90平",
          houseType: "两室一厅",
          familyCount: "3",
          marriage: "已婚",
          residence: "否",
          property: "偶尔欠费",
          type: 0,
          description: "无"
        }
      ],
      worningData2: [
        {
          index: 1,
          username: "张三",
          idCard: "370481199301356534",
          area: "约130平",
          houseType: "三室两厅",
          familyCount: "3",
          marriage: "已婚",
          residence: "否",
          property: "偶尔欠费",
          type: 1,
          description: "物业费欠费"
        },
        {
          index: 1,
          username: "李达康",
          idCard: "370481186306031533",
          area: "约120平",
          houseType: "三室一厅",
          familyCount: "5",
          marriage: "已婚",
          residence: "否",
          property: "正常",
          type: 0,
          description: "无"
        },
        {
          index: 1,
          username: "展开",
          idCard: "370481196506031533",
          area: "约90平",
          houseType: "两室一厅",
          familyCount: "3",
          marriage: "已婚",
          residence: "否",
          property: "偶尔欠费",
          type: 0,
          description: "无"
        }
      ],
      suggestTypeOptions: [],
      sort: {
        sort: "sort",
        order: "asc"
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      addFormRules: {
        liftUser: [
          {
            required: true,
            message: "请选择业主 "
          }
        ],
        description: [
          {
            required: true,
            message: "请填写问题描述 "
          }
        ]
      }
    };
  },
  methods: {
    getList() {
      if (this.filters.name == "刘宇") {
        this.list = this.liuyu;
      } else if (this.filters.name == "赵湖") {
        this.list = this.zhangsan;
      } else {
        this.list = this.list;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.type == 1) {
        return "warning-row";
      }
      return "";
    },
    handleWorning() {
      this.addFormVisible = false;
      this.$message({
        message: "预警成功",
        type: "success",
        duration: 2000
      });
    },
    getNodeData(data) {
      this.dialogDeptVisible = false;
      this.filters.dept = data.name;
      console.log(data);
    },
    handleDept() {
      this.treeDeptData = this.treeData;
      this.dialogDeptVisible = true;
    },
    closeDept() {
      this.dialogDeptVisible = false;
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index;
    },
    resetSearchForm() {
      this.filters.status = "";
      this.filters.area = "";
      this.filters.age = "";
    },
    getDataGrid() {
      this.total++;
      if (this.total % 2 == 0) {
        this.gridDatas = this.worningData1;
      } else {
        this.gridDatas = this.worningData2;
      }
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.drawLine();
      }
    },
    handleFanancing() {
      this.addFormVisible = true;
      this.title = "理财产品简介";
    },
    handleLoan() {
      this.addFormVisible = true;
      this.title = "贷款产品简介";
    },
    addSubmit() {
      this.addFormVisible = false;
      this.$message({
        message: "推送成功",
        type: "success",
        duration: 2000
      });
    }
  },
  mounted() {}
};
</script>
